<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="apple-mobile-web-app-title" content="小蝌蚪" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1"
    />
    <title>maidian</title>
    <style>
      .red {
        height: 400px;
        margin-bottom: 20px;
        background-color: red;
      }

      .green {
        height: 800px;
        background-color: green;
      }

      button {
        width: 100px;
        height: 40px;
        background-color: black;
        color: white;
      }
    </style>
  </head>

  <body>
    <div class="red">
      <button id="btn1" class="xxx yyy">click me1</button>
      <button id="btn2">click me2</button>
    </div>

    <div class="red" seal-traching="caoniansidjajsj">
      4
      <div>
        3
        <div>
          2
          <div>
            1
            <div
              style="
                display: block;
                width: 120px;
                height: 50px;
                background: rgb(106, 6, 221);
              "
            >
              dsdfsdf省份
              <div id="id————1">草从事</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <button type="button" seal-traching="xxx_xxx_xxx_s12">
      <i
        class="et-business-color-export"
        style="display: block; width: 20px; height: 20px; background: red"
      >
        <em>444</em>
      </i>
      <span id="sssssss-222"> 导出当前 </span>
    </button>
    <button type="button" seal-traching="xxx_xxx_xxx_s12">
      <!----><i
        class="et-business-color-export"
        style="display: block; width: 20px; height: 20px; background: red"
      ></i
      ><span id="sssssss-222"> 导出当前 </span>
    </button>
    <div>
      <input name="myInput" type="radio" size="20" /><br />
      <input name="myInput" type="radio" size="20" /><br />
      <input name="myInput" type="radio" size="20" /><br />
    </div>

    <div class="green">
      <button id="btn3">click me3</button>
      <button id="btn4">click me4</button>
    </div>
    <script src="./dist/tracker.min.js"></script>
    <script>
      Tracker.config({
        per: 0.9,
        trachingAttrName: "seal-traching",
        baseUrl: "/seal/traching",
      }).install(window);

      const xx = () => {};

      document
        .getElementsByClassName("red")[0]
        .addEventListener("click", function (event) {
          // console.log("click");
        });

      document["body"].addEventListener("click", function (event) {
        // console.log("document body");
      });

      document.addEventListener("click", function (event) {
        // console.log("document");
      });

      window.addEventListener("click", function (event) {
        // console.log("window");
      });

      document.getElementById("btn1").addEventListener("click", () => {
        let per = JSON.parse(window.localStorage.getItem("PERFORMANCE_DATA"));
        console.log(per);
      });
      document.getElementById("btn2").addEventListener("click", xx);
      document.getElementById("btn3").addEventListener("click", xx);

      document.getElementById("btn4").addEventListener("click", () => {
        document.getElementById("btn1").removeEventListener("click", xx);
        document.getElementById("btn2").removeEventListener("click", xx);
      });
    </script>
  </body>
</html>
